import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  TextInput,
  Image,
  Alert,
  Navigator,
} from 'react-native';
import {Input, Button} from 'react-native-elements';
import Home from './Home';
import HttpUtil from '../utils/HttpUtil';

// import Icon from 'react-native-vector-icons/FontAwesome';

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  dologin = () => {
    const url = 'http://localhost:3000/api/user/login';
    const data = {
      email: this.state.email,
      password: this.state.password,
    };
    console.log(data);
    if (data.email == '' || data.password == '') {
      Alert.alert('请输入账号密码');
      return false;
    }
    HttpUtil.post(url, data)
      .then((res) => {
        if (res.code != 200) {
          Alert.alert('账号或密码错误');
          return false;
        }
        Alert.alert('登陆成功');
        global.storage.save({
          key: 'userState',
          data: {
            user: res.user,
          },
          expires: null,
        });
        this.props.navigation.navigate('Home');
        console.log(res);
      })
      .catch((err) => {
        if (err) {
          //Alert.alert('账号或密码错误');
          console.log(err);
        }
      });
  };
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={require('../assets/images/react.jpg')}
          style={styles.logo}
        />
        {/* <TextInput placeholder="请输入你的邮箱!" style={styles.username} /> */}
        {/* <TextInput placeholder="请输入你的密码!" style={styles.username} /> */}
        <Input
          placeholder="请输入你的邮箱"
          // leftIcon={<Icon name="envelope" size={24} color="black" />}
          containerStyle={styles.username}
          onChangeText={(email) => this.setState({email})}
          autoCapitalize={false}
        />
        <Input
          placeholder="请输入你的密码"
          // leftIcon={<Icon name="password" size={24} color="black" />}
          containerStyle={styles.username}
          secureTextEntry={true}
          onChangeText={(password) => this.setState({password})}
        />

        <Button
          title="登陆"
          buttonStyle={styles.loginBtn}
          onPress={this.dologin}
          //   accessibilityLabel="accessibilityLabel"
        />
        <Button
          title="注册"
          type="outline"
          buttonStyle={styles.registerBtn}
          onPress={() => {
            this.props.navigation.navigate('Register');
          }}
          //   accessibilityLabel="accessibilityLabel"
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  logo: {
    width: 80,
    height: 80,
    marginBottom: 20,
    borderRadius: 50,
    marginTop: 120,
    //     backgroundColor: 'red',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: 350,
    maxHeight: 300,
    //     backgroundColor: 'red',
  },
  username: {
    width: 250,
    height: 20,
    marginBottom: 40,
    //     borderBottomWidth: 1,
    paddingBottom: 15,
    borderColor: '#ff6600',
  },
  loginBtn: {
    width: 230,
    height: 40,
    fontSize: 18,
    lineHeight: 40,
    alignItems: 'center',
    color: '#ffffff',
    backgroundColor: '#ff6600',
    marginBottom: 20,
    marginTop: 10,
  },
  registerBtn: {
    //     color: '#ff6600',
    color: 'green',
    borderStyle: 'solid',
  },
});

export default Login;
